<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <script>
        // //js的入口函数
        // onload = function (){
        //     document.getElementById("")
        // }
        //
        // //jquery的入口函数
        // $(function (){
        //     $("#app")
        // })
    </script>
</head>
<body>
<div id="app">
<!--    <button style="color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px">按钮</button>-->
<!--    <br>-->
<!--    <button style="color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px">按钮</button>-->
<!--    <br>-->
<!--    <button style="color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px">按钮</button>-->
<!--    <br>-->
<!--    <button style="color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px">按钮</button>-->
<!--    <br>-->
    <cdm></cdm>
    <br>
    <cdm>按钮二</cdm>
    <br>
    <cdm>按钮三</cdm>
    <br>
    <cdm>按钮四</cdm>
    <br>

    <cdm2 :btn_data="val"></cdm2>
    <br>

    <cdm3 :btn_data="val" @inputvalchange="chan"></cdm3>  {{inputVal}}
</div>
</body>
<script>

    //自定义组件: 参数一，组件名称；参数二，要封装的数据属性
    Vue.component("cdm",{
        //具体要封装的相同结构标签
        template:"<button style=\"color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px\"><slot>按钮</slot></button>"
    })

    //自定义组件: 参数一，组件名称；参数二，要封装的数据属性
    Vue.component("cdm2",{
        //自定义属性的声明
        props:["btn_data"],
        //具体要封装的相同结构标签
        template:"<button style=\"color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px\">{{btn_data}}</button>"
    })

    Vue.component("cdm3",{
        data(){
            return {
                child_input_val:""
            }
        },
        //自定义属性的声明
        props:["btn_data"],
        //具体要封装的相同结构标签
        template:"<div>" +
            "<button style=\"color: red;font-size: 25px;border: 1px;background: pink;padding-right: 20px;padding-left: 20px;margin-top: 20px\">{{btn_data}}</button>" +
            "<br>" +
            "child_input: <input type='text' v-model='child_input_val' >" +
            "</div>",

        watch:{
            //子组件内监听属性改变
            child_input_val:function (newVal,oldVal){
                // alert(newVal)
                //当子组件监听到数据改变后，需要将新值以事件的方式传递出去（自定义事件）
                this.$emit("inputvalchange",newVal);
            }
        }
    })

    new Vue({
        el:"#app",
        data:{
            val:"按钮2的值",
            inputVal:""
        },
        methods:{
            chan(newVal){
                this.inputVal = newVal;
            }
        },
        // created(){
        //     alert("created...")
        // },
        //vue的入口函数
        mounted(){
            alert("mounted...")
        }
    });
</script>
</html>